<template>
  <div :style="realStyle">{{ value }}</div>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
const props = defineProps<{
  value: string
  style: {
    [propsName: string]: any
  }
}>()

const realStyle = computed(() => {
  const o = {}
  // { name: '章三', age: 19}  => [["name", "章三"], ["age", 19]]
  Object.entries(props.style).forEach(([key, value]) => {
    // 对于数字类型 添加 px结尾
    if (typeof value === 'number') {
      // 10  => 10PX

      o[key] = value + 'px'
      return
    } else if (typeof value === 'object') {
      o[key] = value.value
      return
    }
    o[key] = value
  })

  return o
})
</script>

<script lang="ts">
export default {
  name: 'DText'
}
</script>
